/*
 * @Author: 18163104359 2205227953@qq.com
 * @Date: 2024-01-25 15:20:46
 * @LastEditors: GuitarXiaohe 2205227953@qq.com
 * @LastEditTime: 2024-02-03 21:11:57
 * @FilePath: /umi/src/pages/system/menu/form.jsx
 * @Description:
 */
import React, { useState, useEffect, forwardRef } from "react";
import { Form, Input, Radio } from "antd";
const { TextArea } = Input;
// 子组件forwardRef 防止时机不对找不到子组件的ref
const FormPage = forwardRef((props, ref) => {
  const {
    data = {
      status: "0",
    },
    title,
  } = props;
  // 父级菜单数据
  const [menuOptions, setMenuOptions] = useState([]);

  // 表单数据
  const [formValue] = Form.useForm();
  // 监听表单数据变化 useWatch
  const menuType = Form.useWatch("menuType", formValue);
  const icon = Form.useWatch("icon", formValue);

  // 初始化数据
  const initData = () => {
    if (data.menuId) {
      formValue.setFieldsValue(data);
    } else {
      formValue.setFieldsValue({
        status: "0",
        ...data,
      });
    }
  };

  useEffect(() => {
    initData();
  }, []);

  return (
    <Form
      form={formValue}
      ref={ref}
      labelCol={{
        span: 8,
      }}
      wrapperCol={{
        span: 10,
      }}
      initialValues={{
        remember: true,
      }}
      autoComplete="off"
    >
      <Form.Item
        disabled={title == "查看"}
        label="字典名称"
        name="dictName"
        rules={[
          {
            required: true,
            message: "请填写字典名称",
          },
        ]}
      >
        <Input placeholder="请填写字典名称" />
      </Form.Item>

      <Form.Item
        label="字典类型"
        name="dictType"
        rules={[
          {
            required: true,
            message: "请填写字典类型",
          },
        ]}
      >
        <Input placeholder="请填写字典类型" />
      </Form.Item>
      <Form.Item label="状态" name="status">
        <Radio.Group>
          <Radio value="0">是</Radio>
          <Radio value="1">否</Radio>
        </Radio.Group>
      </Form.Item>

      <Form.Item label="备注" name="remark">
        <TextArea placeholder="请填写备注" />
      </Form.Item>
    </Form>
  );
});
export default FormPage;
